import React, { PureComponent } from 'react'
import withRouter from '../hoc/withRouter'

export class detail extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      books: [
        { id: 1, name: 'java' },
        { id: 2, name: 'javascript' },
        { id: 3, name: 'python' },
        { id: 4, name: 'c++' },
        { id: 5, name: 'c#' },
        { id: 6, name: 'php' },
      ]
    }
  }
  navDetail(id){
    const { router } = this.props
    router.navigate('/home/detail/' + id)
  }
  render() {
    const { books } = this.state
    return (
      <div>
        <h2>书籍列表</h2>
        <ul>
           {
            books.map(item => <li key={item.id} 
              onClick={() => this.navDetail(item.id)}>{item.name}</li>)
           }
        </ul>
      </div>
    )
  }
}

export default withRouter(detail) 